<template>
	<view class="view-box">
		<u--form class="form" ref="myFormRef" :rules="rules" :model="formData">
			<u-form-item label="电话号码" labelWidth="140" prop="mobile">
				<u--input placeholder="请输入电话号码" border="bottom" v-model="formData.mobile" type="number"
					suffixIcon="phone"></u--input>
			</u-form-item>
			<u-form-item label="密码" labelWidth="140" prop="password">
				<u--input placeholder="请输入密码" border="bottom" v-model="formData.password" type="password"
					suffixIcon="eye-off"></u--input>
			</u-form-item>
			<u-form-item>
				<u-button @click="loign" type="primary" text="登录" class="input"></u-button>
			</u-form-item>
		</u--form>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";

	const myFormRef = ref();

	// const disabled = ref(false);
	// const text = ref("发送验证码");

	const formData = reactive({
		mobile: "",
		password: "",
	});

	const rules = {
		mobile: [
			{
				required: true,
				message: '请输入手机号',
				trigger: ['blur'],
			},
			{
				pattern: /^1[3456789]\d{9}$/,
				// 正则检验前先将值转为字符串
				transform(value:any) {
					return String(value);
				},
				message: '手机号码输入不规范'
			}
		],
		password: [
			{
				required: true,
				message: '请输入密码',
				trigger: ['blur'],
			},
			{
				min: 9,
				max: 19,
				message: '密码长度在9-19个字符之间'
			},
		]
	}

	const loign = async () => {
		// if (!myFormRef.value) {
		// 	return;
		// }
		// try {
		// 	await myFormRef.value.validate();
		// } catch (e) {
		// 	// console.log(e);
		// 	// uni.showToast({
		// 	// 	title: "错误",
		// 	// 	icon: "error",
		// 	// });
		// 	return;
		// }
		
		const userID = Math.floor(Math.random() * 10000);
		console.log("用户登录成功：",userID);
		// 测试数据：在本地保存用户ID
		uni.setStorage({
			data: userID,
			key: "userID",
			success() {
				// 跳转tabbar页面
				uni.switchTab({
					url: "/pages/talk/talk"
				})
			}
		})
		

		// 跳转普通页面
		// uni.navigateTo({
		// 	url: "/pages/loign/loign"
		// })
	}

	// const send = () => {
	// 	if (!formData.mobile) {
	// 		uni.showToast({
	// 			title: "请填写电话号码",
	// 			icon: "error",
	// 		})
	// 		return;
	// 	}
	// 	if (!phoneRegex.test(formData.mobile)) {
	// 		uni.showToast({
	// 			title: "电话号码不符合规范",
	// 			icon: "error",
	// 		})
	// 	}
	// 	disabled.value = true;
	// 	let i = 1;
	// 	let time = 5;
	// 	let intervalId = setInterval(() => {
	// 		text.value = `重新发送：${time - i}秒`;
	// 		i++;
	// 		if (i == time) {
	// 			text.value = "发送验证码";
	// 			disabled.value = false;
	// 			clearInterval(intervalId);
	// 		}
	// 	}, 1000)
	// }
</script>

<style lang="scss">
	.view-box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		height: 100vh;

		.form {
			padding: 40rpx;

			.form-row {
				padding: 20rpx 0rpx;
			}

		}
	}
</style>